<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import TnAvatar from '@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import Title from '@/components/title/index.vue'
import PageContainer from '@/components/page-container/index.vue'
import circles from '@/api/circles.js'
import { FILE_URL } from '@/api/config.js'

const paging = ref(null)
const navbarHeight = ref(0)
// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}
const state = reactive({
  loading: false,
  searchValue: '',
  searchResult: [],
  historyList: [],
})

const queryList = (pageNo: any, pageSize: any) => {
  if (state.searchValue != '') {
    circles
      .communityPostLists({
        keyword: state.searchValue,
        page: pageNo,
        page_size: pageSize,
        weigh: 'newest_reply',
      })
      .then((res) => {
        paging.value.complete(res.data)
      })
      .catch((err) => {
        paging.value.complete(false)
      })
  }
}

const searchConfirmHandle = () => {
  if (state.searchValue != '' && !state.historyList.includes(state.searchValue)) {
    state.historyList.push(state.searchValue)
    uni.setStorageSync('searchHistory', state.historyList)
  }
  if (state.searchValue != '') {
    paging.value.reload(true)
  }
}
const clearHistory = () => {
  state.historyList = []
  uni.setStorageSync('searchHistory', [])
}
const navCirclesPostDetailPage = (circlesPostId: number) => {
  tnNavPage(`/circlesPostPages/detail?circlesPostId=${circlesPostId}`)
}
onMounted(() => {
  state.historyList = uni.getStorageSync('searchHistory') || []
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      bg-color="transparent"
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    />
    <z-paging ref="paging" v-model="state.searchResult" @query="queryList">
      <view
        class="search-page"
        :style="{ paddingTop: `${navbarHeight + 20}px` }"
      >
        <!-- 搜索操作栏 -->
        <view class="search-operation">
          <view class="input">
            <TnSearchBox
              v-model="state.searchValue"
              :search-button="false"
              placeholder="搜索帖子"
              shape="round"
              size="sm"
              @search="searchConfirmHandle"
            />
          </view>
          <view class="button">
            <TnButton
              bg-color="tn-blue"
              shape="round"
              width="150"
              height="66"
              @click="searchConfirmHandle"
            >
              搜 索
            </TnButton>
          </view>
        </view>
        <!-- 最近搜索 -->
        <view class="history-list">
          <Title
            title="最近搜索"
            sub-title
            operation-title="删除"
            operation-icon="delete"
            @operation="clearHistory"
          />
          <view class="content-wrapper">
            <view
              v-for="(item, index) in state.historyList"
              :key="index"
              class="history-item tn-gray-light_bg"
            >
              {{ item }}
            </view>
          </view>
        </view>

        <!-- 搜索结果 -->
        <view v-if="state.searchResult.length > 0" class="search-result">
          <Title title="搜索结果" sub-title>
            <template #operation>
              <view />
            </template>
          </Title>
          <view class="content-wrapper">
            <view
              v-for="(item, index) in state.searchResult"
              :key="index"
              class="search-item tn-shadow"
            >
              <view class="item-info">
                <view
                  class="info-detail"
                  @click="navCirclesPostDetailPage(item.id)"
                >
                  <view class="title tn-text-ellipsis-3">{{
                    item.content
                  }}</view>
                </view>
                <view class="info-data">
                  <view class="count-data">
                    <view class="count-item tn-mt-xs">
                      <TnAvatar
                        size="30"
                        :border="true"
                        :url="FILE_URL + item.user.avatar"
                      />
                      <span class="username">
                        {{ item.user.nickname }} 发布
                      </span>
                    </view>
                  </view>
                </view>
              </view>
              <view v-if="item.attachment_type == 'image'" class="item-image">
                <image
                  class="tn-image"
                  :src="FILE_URL + item.attachment[0]"
                  mode="aspectFill"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </PageContainer>
</template>

<style lang="scss" scoped>
.search-page {
  position: relative;
  width: 100%;
  background: linear-gradient(
    180deg,
    var(--tn-color-blue-light) 0px,
    transparent 20%,
    transparent 100%
  );
  padding: 30rpx;
  padding-bottom: 60rpx;

  /* 搜索操作栏 start */
  .search-operation {
    position: relative;
    display: flex;
    align-items: center;

    .input {
      flex: 1;
    }

    .button {
      flex-grow: 0;
      flex-shrink: 0;
      margin-left: 50rpx;
    }
  }
  /* 搜索操作栏 end */

  /* 历史搜索 start */
  .history-list {
    position: relative;
    width: 100%;
    margin-top: 80rpx;

    .content-wrapper {
      position: relative;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 40rpx;

      .history-item {
        flex-grow: 0;
        flex-shrink: 0;
        font-size: 24rpx;
        line-height: 1;
        padding: 18rpx 30rpx;
        border-radius: 10000rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
      }
    }
  }
  /* 历史搜索 end */

  /* 搜索结果 start */
  .search-result {
    margin-top: 50rpx;

    .content-wrapper {
      margin-top: 50rpx;

      .search-item {
        position: relative;
        border-radius: 12rpx;
        padding: 20rpx;
        background-color: #fff;
        display: flex;
        margin-top: 30rpx;

        .item-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-top: 8rpx;

          .info-detail {
            .title {
              font-size: 30rpx;
            }
            .desc {
              font-size: 26rpx;
              color: var(--tn-color-gray);
              margin-top: 12rpx;
            }
          }

          .info-data {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 1;

            .tag-data {
              font-size: 24rpx;
              background-color: var(--tn-color-gray-light);
              color: var(--tn-color-grey);
              padding: 10rpx 20rpx;
              transform: scale(0.8);
              transform-origin: left center;
            }

            .count-data {
              display: flex;
              align-items: center;
              font-size: 26rpx;
              color: var(--tn-color-gray);
              margin-top: 6rpx;

              .count-item {
                display: flex;
                align-items: center;

                .username {
                  margin-left: 10rpx;
                  font-size: 22rpx;
                }

                .data {
                  margin-left: 4rpx;
                }

                & + .count-item {
                  margin-left: 16rpx;
                }
              }
            }
          }
        }

        .item-image {
          flex-grow: 0;
          flex-shrink: 0;
          width: 150rpx;
          height: 150rpx;
          border-radius: 6rpx;
          margin-left: 16rpx;
        }
      }
    }
  }
  /* 搜索结果 end */
}
</style>
